<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myproject</title>
    <style>
        input {
            color: #999;
        }

        .box {
            position: relative;
            /* 纯纯的定位·相对定位 父元素 */
            width: 70px;
            border: 1px solid#ccc;

        }

        .box img {
            margin-top: 10px;
        }

        .close-btn {
            position: absolute;
            /* 纯纯的定位·绝对定位 子元素 */
            top: 5px;
            height: 15px;
            cursor: pointer;
            /* 光标变化，变成小手指 */
            border: 1px solid #ccc;
        }

        body {
            background: url(bg-03.jpg) repeat;
            /* repeat平铺，center top居中对齐 */

        }

        li {
            list-style: none;
            /* 序号的小点点 */
        }

        .bg li {
            float: left;
            /* 排列方式 */
            margin: 0 5px;
            /* 每个之间的间隔 */
            cursor: pointer;
            /* 光标变化，变成小手指 */
        }

        .bg {
            overflow: hidden;
            /* 超过指定范围的东西就隐藏、不占位置 */
            margin: 100px auto;
            background-color: #fff;
            width: 450px;
            padding-top: 5px;
        }

        .bg img {
            width: 100px;
        }
    </style>
</head>

<body>
    <ul class="bg">
        <li><img src="bg-00.jpg"></li>
        <li><img src="bg-01.jpg"></li>
        <li><img src="bg-02.jpg"></li>
        <li><img src="bg-03.jpg"></li>
    </ul>
    <input type="text" value="默认内容">
    <div class="box">
        大白鸟
        <img src="00.png" alt=''>
        <i class='close-btn'>×</i>
    </div>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        var text = document.querySelector('input');
        text.onfocus = function () {
            if (text.value === '默认内容') {
                text.value = '';
                text.style.color = 'red';
            }
        }
        text.onblur = function () {
            if (text.value === '') {
                text.value = '默认内容';
                text.style.color = '#999';
            }
        }
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        btn.onclick = function () {
            box.style.display = 'none';
        }

        var btns = document.getElementsByTagName('button');
        /*    btn得到的是伪数组，所以遍历每一个元素要用btns[i] */
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                /* 先把所有按钮设置为无色 */
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                /* 点击的变成红色 */
                this.style.backgroundColor = 'crimson';
            }
        }
        var imgs = document.querySelector('.bg').querySelectorAll('img');
        for (j = 0; j < imgs.length; j++) {
            imgs[j].onclick = function () {
                /* 将相应路径的图片设为背景，this.src（imgs[j])就是点击获取的路径 */
                document.body.style.backgroundImage = 'url(' + this.src + ')';
                /* 我不理解，但我大受震撼，但可以换成imgs[j]理解
                xxx.src获取了路径，就是imgs[0].src,imgs[2].src,etc */
            }
        }
    </script>
</body>

</html>